<template>
  <div class="app-container">
   <!-- 搜索区 -->
   <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
     <el-form-item label="商户名称" prop="name">
       <el-input v-model="queryParams.name" placeholder="请输入商户名称" clearable style="width: 240px"
         @keyup.enter.native="handleQuery" />
     </el-form-item>

     <el-form-item label="审核状态" prop="status">
       <el-select v-model="queryParams.status" placeholder="请选择" clearable>
           <el-option
             v-for="item in dicts.sys_audit_status"
             :key="item.id"
             :label="item.dictLabel"
             :value="item.dictValue">
           </el-option>
         </el-select>
     </el-form-item>


     <el-form-item>
       <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
     </el-form-item>
   </el-form>



   <el-table :data="tableData.rows" border style="width: 100%"  v-loading="loading" @selection-change="handleSelectionChange">
     <el-table-column type="expand">
         <template slot-scope="scope">
           <el-row>
             <el-col :span="8">
               <el-result title="身份证正面" >
                 <template slot="icon">
                    <el-image   :src="scope.row.idcardFrontUrl"
                      :preview-src-list="[scope.row.idcardFrontUrl]"
                     lazy  style="height: 150px"></el-image>
                 </template>
               </el-result>
             </el-col>

             <el-col :span="8">
               <el-result title="身份证反面" >
                 <template slot="icon">
                    <el-image
                    :src="scope.row.idcardBackUrl"
                    :preview-src-list="[scope.row.idcardBackUrl]"
                    lazy  style="height: 150px"></el-image>
                 </template>
               </el-result>
             </el-col>

             <el-col :span="8">
               <el-result title="营业执照" >
                 <template slot="icon">
                    <el-image   :src="scope.row.bussinessLicenseUrl"
                     :preview-src-list="[scope.row.bussinessLicenseUrl]"
                    lazy  style="height: 150px"></el-image>
                 </template>
               </el-result>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="4">联系地址</el-col>
             <el-col :span="20">{{scope.row.address}}</el-col>
           </el-row>

           <el-row>
             <el-col :span="24">
               <display :item="scope.row"></display>
             </el-col>
           </el-row>

         </template>
      </el-table-column>

      <el-table-column type="selection" width="55" align="center"  />

     <el-table-column prop="name" label="商家名称"    />
     <el-table-column prop="loginName" label="登录账户"   width="120"/>
     <el-table-column label="商家图片" width="200">
       <template slot-scope="scope">
         <img :src="scope.row.picture" height="150">
       </template>
      </el-table-column>
     <el-table-column prop="phone" label="联系电话"  width="120" />
     <el-table-column label="状态" width="80">
       <template slot-scope="scope">
         <el-tag  v-for="item in dicts.sys_audit_status" :key="item.id" v-if="item.dictValue=== scope.row.status" :type="item.listClass" >{{item.dictLabel}}</el-tag>
       </template>
     </el-table-column>


     <el-table-column prop="createTime" label="创建时间" width="180" />

     <el-table-column label="操作" align="left" width="160" class-name="small-padding fixed-width">
       <template slot-scope="scope">
           <el-button size="mini" type="text" v-if="scope.row.status==='0'" style="color: red;" icon="el-icon-edit" @click="handlerProcess(scope.row)">审核</el-button>
       </template>
     </el-table-column>
   </el-table>

   <!-- 分页条 -->
   <el-pagination v-if="tableData.total>0" :current-page="queryParams.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
     :page-size="queryParams.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
     @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 审核对话框-->
    <el-dialog title="管理员审核" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false"
      :before-close="cancelForm">
      <el-form ref="processFormRef" :model="processForm" label-width="100px">

        <el-form-item label="审核" prop="status" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]" >
           <el-radio-group v-model="processForm.status">
              <el-radio v-for="item in dicts.sys_audit_status" v-if="item.dictValue!=='0'" v-bind:key="item.id"   :label="item.dictValue">{{item.dictLabel}}</el-radio>
            </el-radio-group>
        </el-form-item>

       <el-form-item label="备注信息"  >
         <el-input
           type="textarea"
           :rows="2"
           placeholder="请输入内容"
            maxlength="30"
            show-word-limit
           v-model="processForm.description">
         </el-input>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
   import {dataDictTypes } from '@/api/dictdata.js'
   import {dataApi, processApi} from '@/api/merchandiser.js'
   import display from '@/components/BaiduMap/display.vue'

   export default {
     components: {
       display
     },
     data() {
       return {
         loading: false,
         // 表单查询条件对象
         queryParams:{
           page: 1,
           size: 10
         },
         // 分页表格分页的结果对象
          tableData: {
            total: 0,
            rows: []
          },
          //表格选中的对象
          mutilrows:[],
          //表格选中对象的主键的值
          ids: [],
          //编辑按钮禁用
          single: true,
          //数据字典返回结果
          dicts: {},
          //审核表单
          processForm:{
            status: '1'
          },
          open: false
       }
     },
     methods:{
       //选中表格值的变化事件
        handleSelectionChange(val) {
          console.log(val)
            this.mutilrows = val;
            this.ids=val.map(s=> s.id);
            this.single = val.length!==1
        },
       // 每页几笔发生变化
        handleSizeChange(val) {
           this.queryParams.page=1
           this.queryParams.size=val
           // 重新查询
           this.fetchData()
       },
       // 当前页发生变化
       handleCurrentChange(val) {
           this.queryParams.page=val
            // 重新查询
            this.fetchData()
       },
       // 获取后台的查询数据
       fetchData(){
         this.loading=true
         dataApi(this.queryParams).then(resp=> {
             this.tableData.total = resp.data.total
             this.tableData.rows = resp.data.list
             this.loading =false
         })
       },
       //点击搜索按钮
       handleQuery(){
         this.queryParams.page =1
         this.fetchData()
       },
       //查询数据字典的值
       fetchDictTypes() {
         const params= ['sys_audit_status']
         dataDictTypes(params).then(resp=> {
            this.dicts = resp.data
         })
       },
       //点击审核按钮
       handlerProcess(row){
         this.open=true
         this.processForm.id=row.id
         this.processForm.status='1'
       },
       //审核对话框取消
       cancelForm(){
         this.open=false
         if(this.$refs['processFormRef']){
           this.$refs['processFormRef'].resetFields()
         }
         //清空数据
         this.processForm={
            status: '1'
         }
       },
       //提交保存审核
       submitForm(){
         this.$refs['processFormRef'].validate((valid) => {
            if (valid) {
               this.executeProcess()
            }
         })
       },
       //保存审核
       executeProcess(){
         this.$confirm('确定提交数据吗?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
            //ajax发请求
            processApi(this.processForm).then(resp=>{
               this.$message({message: '操作成功', type: 'success'});
               this.cancelForm()
               this.fetchData()
            })

         }).catch(() => {
         })

       }
     },
     created() {
       this.fetchDictTypes()
        this.fetchData()
     }

   }

</script>

<style>
</style>
